<template>
   <tbody>
        <tr v-for="(item,index) in list" :key="item.id">
          <td>{{ index+1 }}</td>
          <td>{{ item.name }}</td>
          <td>
            <img :src="item.picture" />
          </td>
          <td>
            <div class="my-tag">
              <input 
                class="input"
                type="text"
                v-focus
                placeholder="输入标签"
                v-if="flag && item.id===isAck"
                @blur="flag=false"
                @keyup.enter="handler()"
                v-model="tagValue"
              /> 
              <div @dblclick="changeTag(item.id)" class="text" v-else>
               {{item.tag}}
              </div>
            </div>
          </td>
        </tr>
      </tbody>
</template>

<script>
export default {
    data(){
        return {
            flag:false,
            isAck:'',
            tagValue:''
        }
    },
    props:{
        list:{
            type:Array
        }
    },
    methods:{
        changeTag(id){
            this.isAck=id
            this.flag=true

        },
        handler(e){
            console.log(e)
            this.$emit('handler',{value:this.tagValue,code:this.isAck})
            this.flag=false
        }
       
    }
}
</script>

<style lang="less" scoped>
.table-case {
  width: 1000px;
  margin: 50px auto;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }

  .my-table {
    width: 100%;
    border-spacing: 0;
    img {
      width: 100px;
      height: 100px;
      object-fit: contain;
      vertical-align: middle;
    }
    th {
      background: #f5f5f5;
      border-bottom: 2px solid #069;
    }
    td {
      border-bottom: 1px dashed #ccc;
    }
    td,
    th {
      text-align: center;
      padding: 10px;
      transition: all 0.5s;
      &.red {
        color: red;
      }
    }
    .none {
      height: 100px;
      line-height: 100px;
      color: #999;
    }
  }
  .my-tag {
    cursor: pointer;
    .input {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 100px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
      &::placeholder {
        color: #666;
      }
    }
  }
}
</style>